<template>
  <div class="container">
    <div class="main">
      <div class="header">
        <el-button type="primary" @click="add">新建</el-button>
        <!-- <el-select v-model="selectedFilter" placeholder="请选择" style="width: 200px;">  
          <el-option label="启用" value="enabled"></el-option>  
          <el-option label="禁用" value="disabled"></el-option>  
        </el-select>  
        <el-input placeholder="请输入关键字搜索" v-model="searchTable" style="width: 200px;"/>  
        <el-button type="info" @click="query">查询</el-button>  
        <el-button type="info" @click="query">重置</el-button>   -->
      </div>
      <el-table :data="tableData" border class="eltable">
        <el-table-column prop="create_time" label="制单时间" width="200">
          <template #default="{ row }">
            {{ formatDate(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="yclcg_code" label="单据编号"></el-table-column>
        <el-table-column prop="yclcg_gys" label="供应商"></el-table-column>
        <el-table-column prop="yclcg_sl" label="采购数量"></el-table-column>
        <el-table-column prop="yclcg_ruck" label="入库出库"></el-table-column>
        <el-table-column prop="user_name" label="制单人"></el-table-column>
        <el-table-column prop="yclcg_djzt" label="单据状态">
          <template #default="{ row }">
            <span v-if="row.yclcg_djzt === 1">待审核</span>
            <span v-else-if="row.yclcg_djzt === 2">审核通过</span>
            <span v-else-if="row.yclcg_djzt === 3">审核未通过</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="text" @click="editRow(row)" :disabled="row.yclcg_djzt === 2">编辑</el-button>
            <el-button type="text" @click="deleteRow(row)" :disabled="row.yclcg_djzt === 2">审核</el-button>
            <el-button type="text" @click="xqRow(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
        :total="totalItems" layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
  setup() {
    const searchKey = ref('');
    const treeData = ref([]);
    const router = useRouter();
    const defaultProps = {
      children: 'children',
      label: 'label',
    };

    const tableData = ref([]);

    const selectedFilter = ref('');
    const searchTable = ref('');
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalItems = ref(0);
    // 格式化日期函数
    const formatDate = (dateString) => {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
    };
    function sx() {
      axios.get('/api/Rm_yclcg/GetFYRm_yclcg?PageNumber=' + currentPage.value + '&pageSize=' + pageSize.value)
        .then(function (response) {
          console.log(response.data);
          tableData.value = response.data.rm_Yclcgs;
          totalItems.value = response.data.zon
            ;
        }).catch(function (error) {
          console.error('错误:', error);
        })
    }
    sx();
    const add = () => {
      // 添加逻辑  
      router.push('/AddRawMaterialProcurement');
    };
    const up = () => {
      router.push('/UpdateRawMaterialProcurement');
    }


    const query = () => {
      // 查询逻辑  
      console.log('Querying with:', searchTable.value);
    };

    const editRow = async (row) => {
      // 编辑行逻辑  
      console.log('Editing row:', row);
      console.log('Deleting row:', row.yclcg_code);
      //查询数据主表
      const cg = await axios.get('api/Rm_yclcg/Getcg?code=' + row.yclcg_code)

      console.log(cg.data);
      const cg1 = cg.data;

      //查询数据子表
      const cgxq = await axios.get('api/Rm_yclcgxq/Getcgxq?code=' + row.yclcg_code)

      console.log(cgxq.data);
      const cgxq1 = cgxq.data;

      router.push({
        name: 'UpRawMaterialProcurement',
        query: {
          yclcg_code: row.yclcg_code
        }
      });
    };

    const deleteRow = async (row) => {
      router.push({
        name: 'UpdateRawMaterialProcurement',
        query: {
          yclcg_code: row.yclcg_code
        }
      });
    };
    
    const xqRow = async (row) => {
      router.push({
        name: 'RawMaterialProcurementXX',
        query: {
          yclcg_code: row.yclcg_code
        }
      });
    };
    const handleCurrentChange = (page) => {
      currentPage.value = page;
      // 分页逻辑  
      console.log('Current page:', page);
      sx();
    };

    // 确保所有函数都被返回  
    return {
      searchKey,
      treeData,
      defaultProps,
      tableData,
      selectedFilter,
      searchTable,
      currentPage,
      pageSize,
      totalItems,
      add,
      query,
      editRow,
      deleteRow,
      handleCurrentChange,
      up,
      xqRow,
      formatDate
    };
  },
};  
</script>

<style>
.container {
  display: flex;
  gap: 20px;
  height: 95%;
}

.sidebar {
  height: 100%;

}

.main {
  width: 80%;
  flex: 1;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.eltable {
  height: 95%;
}

.letree {
  height: 100%;
}
</style>